<template>
	<view class="app-container">

		<view class="top-section" @click="addShow()">
			<view class="address-selected">
				<!-- <u-image height="48rpx" width="48rpx" style="background-color: #FFFFFF;margin: 0 20rpx;"
					src="/static/image/address.png" :style="submitParam ? 'line-height: 135rpx;' : ''">
				</u-image> -->
				<view v-if="submitParam" class="address-selected-content">
					<view class="left-data">
						<view class="address-detail">
							{{ submitParam.receiverProvince }}{{ submitParam.receiverCity }}{{ submitParam.receiverRegion }}{{ submitParam.receiverDetailAddress }}
						</view>
						<view class="address-contact">
							<text style="margin-right: 10rpx;">{{ submitParam.receiverName }}</text>
							<text>{{ submitParam.receiverPhone }}</text>
						</view>
					</view>
					<image src="../../../static/image/small-arrow.png" mode="aspectFit" class="icon"></image>
				</view>
				<view v-else class="address-add">
					<view class="address-tips">点击添加收货地址</view>
					<image src="../../../static/image/small-arrow.png" mode="aspectFit" class="icon"></image>
				</view>
			</view>
		</view>


		<view class="body-section" v-if="skuShopList.length == 0 && skuData.skuId != null">
			<view class="goods-card">
				<view class="title">
					<u-image height="42rpx" width="42rpx" src="/static/image/store.png"></u-image>
					<view class="title-descs">{{ skuData.shop.shopName }}</view>
				</view>
				<view class="goods-content">
					<u-image height="144rpx" width="144rpx" :src="skuData.skuImages[0].imgUrl" border-radius="16rpx">
					</u-image>
					<view class="goods-data">
						<view class="goods-title">{{ skuData.skuName }}</view>
						<view class="goods-sku">
							{{ skuData.saleAttrValue == null ? '暂无规格描述' : (skuData.saleAttrValue.attrName + "：" + skuData.saleAttrValue.attrValue) }}
						</view>
						<view class="goods-price">
							<view class="price">￥{{ skuData.price.toFixed(2) }}</view>
							<view class="num">×{{ buyNum }}</view>
						</view>
					</view>
				</view>
				<view class="goods-other">
					<view class="number-row" style="display: flex;align-items: center;padding: 22rpx 0;">
						<view style="flex: 2;">购买数量</view>
						<view style="flex: 1;text-align: right;">
							<u-number-box :min="1" :max="skuData.inventory" v-model="buyNum" @change="updateMoney">
							</u-number-box>
						</view>
					</view>
				</view>
			</view>

			<view class="order-msg">
				<picker v-if="skuData.spuInfo.spuAddType == '2'" :value="teamIds" range-key="name" mode="selector"
					@change="selectTeamList" :range="teamList">
					<u-field v-model=" teamIds == null?'请选择捐赠协会':teamList[teamIds].name" input-align="right"
						label="捐赠协会" :disabled="true"></u-field>
				</picker>
				<u-field v-model="buyNum" input-align="right" :disabled="true" label="数量合计"></u-field>
				<!-- p配送方式模块 -->
				<u-field v-model="submitParam.deliveryCompany" input-align="right" label="配送方式" right-icon="arrow-right"
					:disabled="true" @click="deliveryShow = true"></u-field>
				<picker v-if="false" @change="confirm" :value="index" :range="dateList">
					<u-field v-model="deliveryDate" input-align="right" label="配送日期" :disabled="true"></u-field>
				</picker>
				<u-field v-if="false" v-model="billTypeName" input-align="right" label="发票" right-icon="arrow-right"
					:disabled="true" @click="billShow = true"></u-field>
				<view v-if="false" style="padding: 20rpx 28rpx;text-align: right;" @click="showMedol = true">
					<text>积分抵扣：</text>
					<text style="color: #E71E22;margin-left: 5rpx; text-decoration:line-through">
						<text style="font-size: 24rpx;">￥</text>
						{{ (integral / 1000).toFixed(2) }}
					</text>
				</view>
				<view style="display: flex; flex-direction: column;align-content: flex-end;">
					<view v-if="showHistory && skuData.spuInfo.spuAddType == '0'"
						style="text-align: right;color: #E71E22;" @click="selectCoupon">
						{{ couponName == null?'可用优惠券：' + historyList.length:'已选：' + couponName.couponName }}</view>
					<view v-if="couponName != null && couponName.reduceType == '1'"
						style="text-align: right;color: #E71E22; text-decoration: line-through;">￥{{couponName.amount}}
					</view>
					<view v-if="couponName != null && couponName.reduceType == '2'"
						style="text-align: right;color: #E71E22; text-decoration: line-through;">{{couponName.discount}}
						折</view>
					<text v-if="false"
						style="margin-left: auto; margin-right: 0; font-size: 26rpx; color: #E71E22;">返利：￥{{(skuData.skuRebate * buyNum).toFixed(2)}}</text>
				</view>
				<view style="padding: 14rpx 0 30rpx;text-align: right;">
					订单总计：
					<text style="color: #009B65;margin-left: 5rpx;font-size:40rpx" v-if="couponName == null">
						<text style="font-size: 28rpx;">￥</text>
						{{ (skuData.price * buyNum).toFixed(2) - (integral / 1000).toFixed(2) }}
					</text>
					<text style="color: #009B65;margin-left: 5rpx;font-size:40rpx" v-else>
						<text style="font-size: 28rpx;">￥</text>
						{{couponName.reduceType == '1'? ((skuData.price * buyNum - couponName.amount).toFixed(2) - (integral / 1000).toFixed(2) < 0?0:(skuData.price * buyNum - couponName.amount).toFixed(2) - (integral / 1000).toFixed(2) ) : (skuData.price * buyNum * couponName.discount).toFixed(2) - (integral / 1000).toFixed(2)}}
					</text>
				</view>
			</view>
			<view class="order-remark">
				<u-field v-model="submitParam.note" label="买家留言" type="textarea" placeholder="选填，请输入您的留言信息"></u-field>
			</view>
		</view>
		<!-- ====================================================================================== -->
		<!-- 多商品订单 -->
		<view class="body-section" v-if="skuShopList.length > 0">
			<view v-for="(item, index) in skuShopList" :key="item.shop.id" class="shop-group">
				<view class="goods-card">
					<view class="title">
						<u-image height="42rpx" width="42rpx" src="/static/image/store.png"></u-image>
						<view class="title-descs">{{ item.shop.shopName }}</view>
					</view>
					<template v-for="(sku, ids) in item.skuList">
						<view class="goods-content" :key="sku.skuId">
							<u-image height="144rpx" width="144rpx" :src="sku.skuImages[0].imgUrl"
								border-radius="16rpx"></u-image>
							<view class="goods-data">
								<view class="goods-title">{{ sku.skuName }}</view>
								<view class="goods-sku">
									{{ sku.saleAttrValue == null ? '暂无规格描述' : (sku.saleAttrValue.attrName + "：" + sku.saleAttrValue.attrValue) }}
								</view>
								<view class="goods-price">
									<view class="price">￥{{ sku.price.toFixed(2) }}</view>
									<view class="num">×{{ sku.quantity }}</view>
								</view>
							</view>
						</view>
						<view class="goods-other" :key="sku.skuId">
							<!-- <view class="" style="display: flex; flex-direction: column;align-content: flex-end;">
								<view v-if="sku.couponList.length > 0 && sku.isSelect == false && sku.spuInfo.isActivityStatus == '0'" style="text-align: right;color: #E71E22;" @click="openCouponMore(sku.couponList, index,ids)">可用：{{ sku.couponList.length > 0?sku.couponList.length:0 }}</view>
								<view v-if="sku.couponList.length > 0 && sku.isSelect == true" style="text-align: right;color: #E71E22;" @click="openCouponMore(sku.couponList, index,ids)">{{ sku.couponName }}</view>
								<view v-if="sku.couponList.length > 0 && sku.isSelect == true" style="text-align: right;color: #E71E22; text-decoration: line-through;" >{{ sku.reduceType == '1'?'￥ '+sku.reduceValue:sku.reduceValue+' 折' }}</view>
								<view v-if="sku.couponList.length > 0 && sku.isSelect == true" style="text-align: right;color: #E71E22;">
									单计：{{sku.reduceType == '1'?(sku.quantity * sku.price - sku.reduceValue):(sku.quantity * sku.price * sku.reduceValue)}} 
								</view>
								<text v-if="false" style="margin-left: auto; margin-right: 0; font-size: 26rpx; color: #E71E22;">返利：￥{{(sku.skuRebate * sku.quantity).toFixed(2)}}</text>
							</view> -->
							<view class="number-row" style="display: flex;align-items: center;padding: 22rpx 0;">
								<view style="flex: 2;">购买数量</view>
								<view style="flex: 1;text-align: right;">
									<u-number-box :min="1" :max="sku.inventory" :value="sku.quantity"
										@change="addordel($event,item,index,ids)">
									</u-number-box>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="order-msg">
				<u-field v-model="multipleBuyNum" input-align="right" :disabled="true" label="数量合计"></u-field>
				<view v-if="skuShopList.length > 0" class=""
					style="display: flex; flex-direction: column;align-content: flex-end;">
					<view v-if="showHistory && historyList.length > 0" style="text-align: right;color: #E71E22;"
						@click="selectMore">
						{{ couponName == null?'可用优惠券：' + historyList.length:'已选：' + couponName.couponName }}</view>
					<view v-if="couponName != null && couponName.reduceType == '1'"
						style="text-align: right;color: #E71E22; text-decoration: line-through;">￥{{couponName.amount}}
					</view>
					<view v-if="couponName != null && couponName.reduceType == '2'"
						style="text-align: right;color: #E71E22; text-decoration: line-through;">{{couponName.discount}}
						折</view>
				</view>
				<u-field v-model="submitParam.deliveryCompany" input-align="right" label="配送方式" right-icon="arrow-right"
					:disabled="true" @click="deliveryShow = true"></u-field>
				<picker v-if="false" @change="confirm" :value="index" :range="dateList">
					<u-field v-model="deliveryDate" input-align="right" label="配送日期" right-icon="arrow-right"
						:disabled="true"></u-field>
				</picker>
				<u-field v-if="false" v-model="billTypeName" input-align="right" label="发票" right-icon="arrow-right"
					:disabled="true" @click="billShow = true"></u-field>
				<view v-if="false" style="padding: 20rpx 28rpx;text-align: right;" @click="showMedol = true">
					<text>积分抵扣：</text>
					<text style="color: #E71E22;margin-left: 5rpx; text-decoration:line-through">
						<text style="font-size: 24rpx;">￥</text>
						{{ (integral / 1000).toFixed(2) }}
					</text>
				</view>
				<view style="padding: 20rpx 28rpx;text-align: right;">
					订单总计：
					<text style="color: #009B65;margin-left: 5rpx;font-size:40rpx">
						<text
							style="font-size: 24rpx;">￥</text>{{ (multipleTotalAmount.toFixed(2) - integral / 1000).toFixed(2) }}
					</text>
				</view>
			</view>
			<view class="order-remark">
				<u-field v-model="submitParam.note" label="订单备注" type="textarea" placeholder="如有特别需求请先和商家协商一致再填写">
				</u-field>
			</view>
		</view>

		<view class="bottom-row">
			<view style="line-height: 80rpx;margin-right: 10rpx;width: calc(100% - 220rpx);text-align: left;">
				一共{{ skuShopList.length > 0 ? multipleBuyNum : buyNum }}件，合计：
				<text style="color: #009B65;margin-left: 5rpx;font-size: 34rpx;font-weight: bold;">
					<text style="font-size: 22rpx">￥</text>
					{{ (skuShopList.length > 0 ? multipleTotalAmount - (integral / 1000).toFixed(2) : couponName == null?skuData.price * buyNum - (integral / 1000).toFixed(2):(couponName.reduceType == '1'?(skuData.price * buyNum - couponName.amount - (integral / 1000) > 0?skuData.price * buyNum - couponName.amount - (integral / 1000):0) : skuData.price * buyNum * couponName.discount - (integral / 1000).toFixed(2))).toFixed(2) }}</text>
			</view>
			<view v-if="groupIsBuy == false">
				<u-button :customStyle="buttonStyle" shape="circle" @click="submitOrder">付款</u-button>
			</view>
			<view v-if="groupIsBuy == true"
				style="width: 220rpx; font-size: 36rpx; font-weight: 500; line-height: 86rpx; color: red;">
				该团购已购买
			</view>
		</view>

		<!-- 配送方式选择器 -->
		<u-select v-model="deliveryShow" mode="single-column" :list="deliveryList" @confirm="deliverySelect"></u-select>

		<!-- 发票 -->
		<u-popup v-model="billShow" border-radius="12" mode="bottom" :mask-close-able="false">
			<view class="bill-popup">
				<view class="bill-popup-title">发票类型</view>
				<view style="margin: 10rpx 0 10rpx 25rpx">
					<u-radio-group v-model="submitParam.billType">
						<u-radio v-for="item in billList" :key="item.value" :name="item.value"
							@change="billTypeSelect(item)">
							{{ item.label }}
						</u-radio>
					</u-radio-group>
				</view>
				<view v-if="submitParam.billType != '0'" style="margin-top: 20rpx;">
					<view class="bill-popup-title">发票内容</view>
					<view>
						<u-field v-model="submitParam.billHeader" label-width="150" input-align="right" label="发票抬头"
							placeholder="请填写发票抬头"></u-field>
						<u-field v-model="submitParam.billReceiverPhone" label-width="150" input-align="right"
							label="收票人电话" placeholder="请填写收票人电话"></u-field>
						<u-field v-model="submitParam.billReceiverEmail" label-width="150" input-align="right"
							label="收票人邮箱" placeholder="请填写收票人邮箱"></u-field>
						<u-cell-item title="发票内容" value="商品明细" :arrow="false" :title-style="{color: '#303133'}"
							:value-style="{color: '#303133'}"></u-cell-item>
					</view>
				</view>

				<view style="position: fixed;bottom: 10rpx;width: calc(100% - 40rpx);">
					<u-button :customStyle="buttonStyle" shape="circle" @click="confirmBill()">确定</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 收货地址 -->
		<u-popup v-model="addressShow" border-radius="12" mode="bottom" :closeable="true">
			<view class="address-selector">
				<view class="addr-title">请选择收货地址</view>
				<view v-for="address in addressList" :key="address.id" class="as-item" @click="addressChange(address)">
					<u-image height="48rpx" width="48rpx"
						style="background-color: #FFFFFF;line-height: 140rpx;margin: 0 20rpx;"
						src="/static/image/address.png">
					</u-image>
					<view>
						<view style="padding: 10rpx 0;">
							<text>{{ address.name }}</text>
							<text style="margin: 0 15rpx;color: #909399;">{{ address.phoneNumber }}</text>
							<text class="default-tag" v-if="address.defaultStatus == '0'">默认</text>
						</view>
						<view style="padding: 10rpx 0;">
							{{ address.province }} {{ address.city }} {{ address.region }} {{ address.detailAddress }}
						</view>
					</view>
				</view>
				<view class="add-btn" @click="saveAddress('')">
					<image mode="aspectFit" src="../../../static/image/add-btn.png" class="icon"></image>
					<view class="add-tips">添加地址</view>
				</view>
			</view>
		</u-popup>

		<!-- 积分抵扣弹窗 -->
		<view class="showPopup" v-if="showMedol">
			<view class="centent-white-box">
				<view class="title-text">
					积分抵扣
				</view>
				<view style="color: red; text-align: center;">
					当前账户积分：{{userintegral}}
				</view>
				<view style="font-size: 28rpx; color: gainsboro; text-align: center;">
					(0.01 = 10积分)
				</view>
				<view class="ticket-box" style="margin: 0 auto;">
					<u-number-box v-model="integral" :min="0" :max="userintegral"></u-number-box>
				</view>
				<view class="bottom-list-box" @click="showMedol = false">
					<view class="">
						确 认 抵 扣
					</view>
				</view>
			</view>
		</view>

		<!-- 协会弹窗列表 -->
		<view class="showPopup" v-if="showTeamStatus">
			<view class="centent-white-box">
				<view class="title-text">
					选择捐赠协会
				</view>
				<view class="ticket-box">
					<u-radio-group v-model="teamId" wrap="true" @change="radioGroupChange">
						<u-radio v-for="(item, index) in teamList" :key="index" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="bottom-list-box" @click="confirmDonate">
					<view class="">
						确 认 捐 赠
					</view>
				</view>
			</view>
		</view>

		<!-- 购买类型 -->
		<view class="showPopup" v-if="showPayType">
			<view class="centent-white-box" style="position: relative;">
				<view class="">
					<image src="../../../static/image/shop/pay-header.png" style="width: 100%;" mode="widthFix"></image>
				</view>
				<!-- <u-radio-group v-model="payType" style="display: flex; justify-content: center; margin-top: 20rpx;">
					<u-radio name='0'>线下联系</u-radio>
					<u-radio name='1'>线上支付</u-radio>
				</u-radio-group> -->
				<!-- 手机号 -->
				<view v-if="payType == 0"
					style="display: flex; justify-content: center; align-content: center; margin-top: 100rpx;"
					@click="openPhone">
					联系热线：{{phone}}
				</view>
				<!-- 收款码 -->
				<view v-else
					style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
					<view class="qrcode-box">
						<image src="../../../static/image/shop/pay.png" mode="widthFix" style="width: 400rpx;height: 400rpx"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-around;width:100%">
						<view style="color: royalblue; margin: 20rpx 0rpx; font-size: 32rpx;color: #CA8248;text-decoration-line:underline" @click="saveQrcode">
							保存付款码
						</view>
					</view>
					<view class="" @click="uploadImage" style="background-color:#FAF6FF;border-radius: 12rpx;padding: 30rpx 20rpx ;display: flex;align-items: center;width: 80%;">
						<view class="" style="background-color: #FFFFFF;flex:0 0 104rpx;height: 164rpx;position: relative;">
							<view  v-if="payImage == ''" class="" style="padding:50rpx 20rpx;">
								<image src="../../../static/image/shop/upload-img.png" mode="widthFix" style="width: 100%;"></image>
							</view>
							<image style="width:104rpx;height:164rpx" v-if="payImage != ''" :src="payImage" mode="aspectFit"></image>
							<view  v-if="payImage != ''" @tap.stop="showImage"  class="" style="padding:60rpx 30rpx;background:#00000022;position: absolute;top:0rpx;left:0rpx;width:100%;height:100%">
								<image src="../../../static/image/shop/fangdajing.png" mode="widthFix" style="width: 100%;"></image>
							</view>
						</view>
						<view class="" style="flex: 1;margin-left: 20rpx">
							<view class=""style="color: #444444;font-size: 30rpx">
								上传凭证
							</view>
							<view class="" style="color: #999999;font-size: 26rpx">
								付款成功，请务必上传付款凭证
							</view>
						</view>
					</view>
					
					<view class="" style="display: flex;justify-content: center;align-items: center;padding: 30rpx;">
						<image src="../../../static/image/shop/phone.png" mode="widthFix" style="width: 40rpx;"></image>
						<text style="color: #444444;font-size: 30rpx;padding-left: 10rpx;">15632653234</text>
					</view>
				</view>
				<view class="bottom-pay-type" @click="openPhone">
					<image src="../../../static/image/shop/close.png" mode="widthFix" style="width: 50rpx;height: 50rpx;" @click="showPayType=false"></image>
					<!-- <u-button v-if="payType == 1 && payImage != ''" type="success" @click="submitOrder">提交</u-button>
					<u-button @click="showPayType = false">取消</u-button> -->
				</view>
			</view>
		</view>

		<!-- 选择优惠券弹出层 -->
		<view class="showPopup" v-if="clickShowHistory">
			<view class="centent-white-box">
				<view class="title-text">
					选择优惠券
				</view>
				<view class="ticket-box">
					<u-checkbox-group :max="1" iconPlacement="left" placement="column">
						<u-checkbox @change="checkboxChange($event, item, index)" icon-size="36"
							:customStyle="{marginBottom: '8px'}" v-for="(item, index) in historyList" :key="index"
							:name="item.historyId" v-model="item.checked" shape="circle" active-color="success"
							:disabled="item.disabled" :style="item.disabled?'justify-content: space-between;':''">
							{{item.couponName}} <span style="margin-left: 70rpx; color:  red;">-
								{{item.reduceType == '1'?((item.balance == null?item.amount:item.balance)+'元'):((item.discount * 100)+'折')}}</span>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="bottom-list-box" @click="clickShowHistory = false">
					<view class="">
						确 认 选 择
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import utils from '@/config/util.js';

	export default {
		data() {
			return {
				url: this.$store.state.apiBaseUrl + 'common/upload',
				// 上传的凭证
				payImage: "",
				// 替换的凭证
				oldImage: "",
				// 联系热线
				phone: '13518543037',
				// 默认为线下联系
				payType: 1,
				// 显示购买类型
				showPayType: false,
				// 选择协会下标
				teamIds: null,
				// 协会列表
				teamList: [],
				// 选择的捐赠协会
				teamId: null,
				// 显示协会弹窗
				showTeamStatus: false,
				// 配送时间
				dateList: [],
				// 配送日期
				deliveryDate: null,
				// 团购是否已经购买过
				groupIsBuy: false,
				// 订单类型
				orderType: 0,
				// 当前账户可用积分
				userintegral: 0,
				// 显示选择抵扣积分弹窗
				showMedol: false,
				// 选择的积分
				integral: 0,
				// 单商品打开弹窗还是多商品: 单：0，多：1
				isOpenOrStatus: 0,
				// 选择的优惠券 (单商品)
				couponName: null,
				// 可用优惠券弹窗
				clickShowHistory: false,
				// 已经选择的优惠券（多商品用于去重）
				removeList: [],
				// 已经选择的优惠券
				selectCpId: [],
				// 多商品暂存的点击序号
				clickIds: null,
				skuIds: null,
				// 可用优惠券列表
				historyList: [],
				// 是否显示可选择优惠券
				showHistory: true,
				// 配送方式选择器
				deliveryShow: false,
				// 收货地址选择器
				addressShow: false,
				// 发票popup层
				billShow: false,
				// 发票类型选择器
				billTypeShow: false,
				addressList: [],
				// 配送方式列表
				deliveryList: [{
					label: '普通配送',
					value: '普通配送'
				}],
				// 发票列表
				billList: [],
				// 多商品订单使用
				skuShopList: [],
				// 多商品订单的商品总数
				multipleBuyNum: 0,
				// 多商品订单的总支付金额
				multipleTotalAmount: 0.00,
				// 单商品订单使用 直接购买按钮跳转
				skuData: {},
				// 单商品订单购买的数量
				buyNum: 1,
				// 发票类型名称
				billTypeName: '不开发票',
				submitParam: {
					totalAmount: null,
					payAmount: null,
					shopId: null,
					receiverName: null,
					receiverPhone: null,
					receiverPostCode: null,
					receiverProvince: null,
					receiverCity: null,
					receiverRegion: null,
					receiverDetailAddress: null,
					note: null,
					deliveryCompany: '普通配送',
					sourceType: 1,
					billType: 0,
					billHeader: null,
					billContent: null,
					billReceiverPhone: null,
					billReceiverEmail: null,
					// 配送日期
					deliveryDate: null,
					itemList: [],
				},
				buttonStyle: {
					background: 'linear-gradient(328deg, #03D289 0%, #009B65 100%)',
					color: '#FFFFFF',
					borderColor: 'transparent',
					borderRadius: '46rpx',
					width: '320rpx',
					height: '80rpx'

				},
				// 返回刷新标记
				refresh: false
			}
		},
		onLoad(e) {
			this.userintegral = uni.getStorageSync('userInfo').integration
			let data = JSON.parse(uni.getStorageSync("placeOrder"));
			console.log(e);
			console.log(data);
			if (data.constructor === Array) {
				let list = e.spuIdList.split(",")
				this.getSkuInfoList(data);
				// 获取配送时间
				this.getDeliveryDate()
				// 获取多商品的相同优惠券
				this.getMoreCoupon(list)
			} else {
				this.skuData = data.skuData;
				this.buyNum = data.buyNum;
				if (data.skuData.spuInfo.spuAddType) {
					if (data.skuData.spuInfo.spuAddType == 2) {
						this.$api.request.getUserIsTeam({}, res => {
							this.teamList = res.data
						})
					}
					// 如果是团购商品则获取日期和判断是否已经购买
					if (data.skuData.spuInfo.spuAddType == '1') {
						this.orderType = 3
						this.getIsBuyDate(data.skuData.skuId)
					} else {
						// 获取配送时间
						this.getDeliveryDate()
					}
				}
				this.getCouponBySpuType(data.skuData.spuId)
			}

			this.getBillDictList();
		},
		onShow() {
			this.getAddressList();
		},
		watch: {
			refresh(newVal, oldVal) {
				if (newVal) {
					location.reload();
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'openid']),
			// hasLine() {
			// 	if((this.showHistory && this.skuData.spuInfo.spuAddType == '0') || 
			// 		(this.couponName != null && this.couponName.reduceType == '1') ||
			// 		(this.couponName != null && this.couponName.reduceType == '2') ||
			// 		(this.skuData.isSpuAdd))
			// 	{
			// 		return true
			// 	} else {
			// 		return false
			// 	}
			// }
		},
		methods: {
			// 选择捐赠协会
			radioGroupChange(e) {
				console.log(e);
			},
			// 获取多商品相同优惠券
			getMoreCoupon(param) {
				this.$api.request.getMoreSpuCoupon(param, res => {
					if (res.code == 200) {
						console.log(res);
						this.historyList = res.data
						this.showHistory = res.data.length > 0 ? true : false
					}
				})
			},
			// 选择配送日期
			confirm(e) {
				console.log(e);
				this.deliveryDate = this.dateList[e.detail.value]
			},
			// 获取配送日期
			getDeliveryDate() {
				this.$api.request.getDeliveryDateList({}, res => {
					if (res.data.length > 0) {
						this.dateList = res.data
						this.deliveryDate = res.data[res.data.length - 1]
					} else {
						this.deliveryDate = "暂无配送日期"
					}
				})
			},
			// 获取该用户是否已经购买过此商品及日期
			getIsBuyDate(skuId) {
				this.$api.request.getGroupDateBuy({
					memberId: uni.getStorageSync('userInfo').id,
					skuId: skuId
				}, res => {
					if (res.code == 200) {
						this.deliveryDate = res.data.date
						this.groupIsBuy = res.data.status
					}
				})
			},
			// 点击选择优惠券 (单商品)
			selectCoupon() {
				console.log("显示弹窗");
				this.clickShowHistory = true
				this.isOpenOrStatus = 0
			},
			// 点击选择优惠券（多商品）
			selectMore() {
				this.clickShowHistory = true
				this.isOpenOrStatus = 2
			},
			// 添加地址
			saveAddress(id) {
				uni.navigateTo({
					url: "/pages/sys/shopCart/addressManage?id=" + id
				})
			},
			// 修改商品数量，清空优惠券
			updateMoney(e) {
				console.log(e);
				this.couponName = null
				this.$nextTick(() => {
					this.clickShowHistory = false
				})
				for (var i = 0; i < this.historyList.length; i++) {
					this.historyList[i].disabled = false
					this.historyList[i].checked = false
				}
			},
			saveQrcode(){
				uni.downloadFile({
					url:'../../../static/image/shop/pay.png',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							success() {
								uni.showToast({
									icon:"success",
									title:"保存成功"
								})
							}
						})
					}
				})
			},
			// 上传图片
			uploadImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res => {
						console.log(res);
						this.imageUrl(res.tempFilePaths[0])
					}
				})
			},
			imageUrl: function(file) {
				const that = this
				const formData = {
					thumb_mode: 1,
				};
				uni.uploadFile({
					url: this.url,
					filePath: file,
					name: 'file',
					formData: formData,
					success(uploadFileResult) {
						console.log(uploadFileResult);
						const uploadFileRes = JSON.parse(uploadFileResult.data) || {};
						if (uploadFileRes.code == 200 && uploadFileRes.data) {
							if (that.payImage != '') {
								that.oldImage = that.payImage
								that.payImage = uploadFileRes.data.url
							} else {
								that.payImage = uploadFileRes.data.url
							}
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					},
					fail(err) {
						uni.showToast({
							title: '网络链接错误',
							icon: 'error'
						})
					}
				});
			},
			// 打开选择优惠券弹窗 (多商品)
			openCouponMore(list, index, ids) {
				this.clickShowHistory = true
				this.isOpenOrStatus = 1
				// 判断优惠券是否已经被其他商品选择，如果已经被选择，则禁用
				console.log(list);
				for (let i = 0; i < list.length; i++) {
					if (this.selectCpId.includes(list[i].historyId) && list[i].checked == false) {
						list[i].disabled = true
					} else {
						list[i].disabled = false
					}
				}
				this.clickIds = index
				this.skuIds = ids
				this.historyList = list
				console.log(list);
			},
			// 选择优惠券
			checkboxChange(e, item, index) {
				if (item.id == '1569966862833250306' || item.id == '1569985087897825281' || item.id ==
					'1569985596788535298' || item.id == '1569985866041880577') {
					if (this.isOpenOrStatus == 2) {
						console.log("多商品10%折扣劵");
						let totalAmount = 0.00
						this.skuShopList.forEach(item => {
							item.skuList.forEach(sku => {
								totalAmount += sku.quantity * sku.price;
							})
						})
						item.amount = (totalAmount * 0.1) > item.balance ? item.balance : (totalAmount * 0.1).toFixed(2)
					} else if (this.isOpenOrStatus == 1) {
						console.log("多商品");
						let totalAmount = 0.00
						this.skuShopList.forEach(item => {
							item.skuList.forEach(sku => {
								totalAmount += sku.quantity * sku.price;
							})
						})
						item.amount = (totalAmount * 0.1) > item.balance ? item.balance : (totalAmount * 0.1).toFixed(2)
					} else {
						console.log("单商品");
						item.amount = (this.skuData.price * this.buyNum * 0.1) > item.balance ? item.balance : (this
							.skuData.price * this.buyNum * 0.1).toFixed(2)
					}
					console.log(item);
				}
				// 用于区分单商品还是多商品
				if (this.isOpenOrStatus == 2) {
					if (e.value == true) {
						this.multipleTotalAmount = this.multipleTotalAmount - parseFloat(item.amount).toFixed(2)
						this.couponName = item
						this.selectCpId.push(item.historyId)
					} else {
						console.log(this.couponName.amount);
						this.multipleTotalAmount = this.multipleTotalAmount + parseFloat(this.couponName.amount)
						this.selectCpId.pop(this.couponName.historyId)
						this.couponName = null
					}
				} else if (this.isOpenOrStatus == 1) {
					console.log(item);
					this.skuShopList[this.clickIds].skuList[this.skuIds].isSelect = e.value
					if (e.value == true) {
						this.skuShopList[this.clickIds].skuList[this.skuIds].couponName = item.couponName
						this.skuShopList[this.clickIds].skuList[this.skuIds].reduceType = item.reduceType
						this.skuShopList[this.clickIds].skuList[this.skuIds].reduceValue = item.reduceType == '1' ? item
							.amount : item.discount
						this.skuShopList[this.clickIds].skuList[this.skuIds].couponId = item.historyId
						// 判断已选择的优惠券中是否已经被其他商品选择
						this.selectCpId.push(item.historyId)
					} else {
						this.skuShopList[this.clickIds].skuList[this.skuIds].couponName = null
						this.skuShopList[this.clickIds].skuList[this.skuIds].reduceType = null
						this.skuShopList[this.clickIds].skuList[this.skuIds].reduceValue = null
						this.skuShopList[this.clickIds].skuList[this.skuIds].couponId = null
						// 去掉该已选择的优惠券
						let ids = this.selectCpId.indexOf(item.historyId)
						this.selectCpId.splice(ids, 1)

					}
					this.calMultipleData()
					console.log(this.selectCpId)
				} else {
					console.log(e);
					if (e.value == true) {
						this.couponName = item
					} else {
						this.couponName = null
					}
				}

			},
			// 添加地址
			addShow() {
				if (this.submitParam) {
					this.addressShow = true
				} else {
					uni.navigateTo({
						url: "/pages/sys/shopCart/addressManage?id="
					})
				}
			},
			// 根据购买的商品，获取相应的优惠券
			getCouponBySpuType(spuId) {
				this.$api.request.getHistoryByUserSpuId({
					spuId: spuId,
					memberId: uni.getStorageSync('userInfo').id
				}, res => {
					if (res.code == 200) {
						console.log("数据来了");
						console.log(res.data);
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].checked = false
						}
						this.historyList = res.data
						this.showHistory = res.data.length > 0 ? true : false
					}
				})
			},
			getAddressList() {
				try {
					this.$api.request.getMemberReceiveAddrList(res => {
						this.addressList = res.data;
						this.setAddressParam(this.addressList[0]);
					});
				} catch (e) {
					console.log(e);
				}
			},
			// 获取商品详情列表
			getSkuInfoList(param) {
				try {
					this.$api.request.getSkuInfoList(param, res => {
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].checked = false
						}
						this.skuShopList = res.data;
						console.log(res.data);
						this.calMultipleData();
					});
				} catch (e) {
					console.log(e);
				}
			},
			// 计算多商品订单的价格以及数量
			calMultipleData() {
				console.log(this.skuShopList);
				let that = this;
				this.multipleBuyNum = 0
				this.multipleTotalAmount = 0.00
				this.skuShopList.forEach(item => {
					item.skuList.forEach(sku => {
						that.multipleBuyNum += sku.quantity;
						let amount = sku.isSelect == true ? (sku.reduceType == '1' ? sku.quantity * sku
								.price - sku.reduceValue : sku.quantity * sku.price * sku.reduceValue) :
							sku.quantity * sku.price
						that.multipleTotalAmount += amount;
					})
				})
			},
			// 拨打手机号
			openPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				});
			},
			// 增加或减少商品数量
			addordel(e, item, index, ids) {
				this.skuShopList[index].skuList[ids].quantity = e.value
				this.updateMoney()
				this.calMultipleData()
			},
			// 发票字典数据列表
			getBillDictList() {
				try {
					this.$api.request.getDictList({
						dictType: 'yyt_invoice_type'
					}, res => this.billList = res.data);
				} catch (e) {
					console.log(e);
				}
			},
			// 用户再次增加或者减少商品数量
			setShopSize(e, item) {
				console.log(e.value);
				item.quantity = e.value
				let num = e.value
				if (num === 0) {
					// this.$api.msg("")
				} else {
					this.$api.request.setShopSize({
						id: item.id,
						num: num,
					}, res => {
						// console.log(res);
						// this.getShopCart()
						item.quantity = num

					})
				}

			},

			// 选择捐赠协会
			selectTeamList(e) {
				console.log(e);
				this.teamId = this.teamList[e.detail.value].id
				this.teamIds = e.detail.value
			},

			// 确定捐赠
			confirmDonate() {
				if (this.teamId == null || this.teamId == '') {
					this.$api.msg("请选择捐赠协会")
				} else {
					this.showTeamStatus = false
					this.submitOrder()
				}
			},


			// 用户提交订单
			submitOrder() {
				let data = {
					skuList: []
				}
				// 判断库存是否足够
				if (this.skuShopList.length > 0) {
					data = JSON.parse(JSON.stringify(this.skuShopList[0].skuList))
					for (let i = 0; i < data.length; i++) {
						delete data[i].shop
					}
				} else {
					let skuList = []
					skuList.push(JSON.parse(JSON.stringify(this.skuData)))
					skuList[0].quantity = this.buyNum
					data = skuList
					delete data[0].shop
				}

				if (this.submitParam.receiverPhone == null) {
					this.$api.msg("请选择地址")
				} else {
					this.$api.request.isEnoughStatus(data, res => {
						console.log(res.code+">>>>>")
						// 库存充足
						if (res.code == 200 && res.data == true) {
							if (this.submitParam) {
								let param = Object.assign({}, this.submitParam);
								console.log("商品数量："+this.skuShopList.length)
								if (this.skuShopList.length > 0) { // 多商品订单
									let totalAmount = 0.00
									this.skuShopList.forEach(item => {
										item.skuList.forEach(sku => {
											totalAmount += sku.quantity * sku.price;
										})
									})
									param.totalAmount = totalAmount
									param.payAmount = this.multipleTotalAmount - (this.integral / 1000).toFixed(2);
									param.integration = this.multipleTotalAmount
									param.growth = this.multipleTotalAmount
									param.shopId = this.skuData.shopId
									param.note = this.submitParam.note
									param.payImage = this.payImage
									param.oldImage = this.oldImage
									param.sourceType = 1
									param.useIntegration = this.integral,
										param.integrationAmount = (this.integral / 1000).toFixed(2)
									param.couponId = this.selectCpId.join(',')
									param.couponAmount = param.totalAmount - param.payAmount
									param.orderType = this.orderType
									param.deliveryDate = this.deliveryDate == '暂无配送日期' ? null : this.deliveryDate
									this.skuShopList.forEach(item => item.skuList.forEach(sku => {
										let vals = '';
										if (sku.saleAttrValue != null) {
											vals = JSON.stringify({
												key: sku.saleAttrValue.attrName,
												value: sku.saleAttrValue.attrValue
											})
										}
										param.itemList.push({
											spuId: sku.spuInfo.id,
											spuName: sku.spuInfo.spuName,
											spuPic: sku.spuImages.length > 0 ? sku.spuImages[
												0] : '',
											spuBrand: sku.brandName,
											categoryId: sku.catalogId,
											skuId: sku.skuId,
											skuName: sku.skuName,
											skuPic: sku.skuImages[0].imgUrl,
											skuPrice: sku.price,
											skuRebate: (sku.skuRebate * sku.quantity).toFixed(
												2),
											skuQuantity: sku.quantity,
											skuAttrsVals: vals,
											shopId: item.shopId,
											actId: sku.spuInfo.actId,
											promotionAmount: sku.price * sku.quantity,
											realAmount: sku.reduceType == null ? sku.price *
												sku.quantity : (sku.reduceType == '1' ? (sku
													.quantity * sku.price - sku.reduceValue
													) : (sku.quantity * sku.price * sku
													.reduceValue)),
											couponAmount: (sku.price * sku.quantity) - (sku
												.reduceType == null ? sku.price * sku
												.quantity : (sku.reduceType == '1' ? (sku
													.quantity * sku.price - sku
													.reduceValue) : (sku.quantity * sku
													.price * sku.reduceValue)))

										})
									}))
								} else {
									// 单商品订单
									param.totalAmount = this.skuData.price * this.buyNum
									param.payAmount = this.couponName == null ? this.skuData.price * this.buyNum -
										(this.integral / 1000).toFixed(2) : (this.couponName.reduceType == '1' ?
											this.skuData.price * this.buyNum - this.couponName.amount - (this
												.integral / 1000).toFixed(2) : this.skuData.price * this.buyNum *
											this.couponName.discount).toFixed(2) - (this.integral / 1000).toFixed(
											2)
									param.integration = this.couponName == null ? this.skuData.price * this
										.buyNum : (this.couponName.reduceType == '1' ? this.skuData.price * this
											.buyNum - this.couponName.amount : this.skuData.price * this.buyNum *
											this.couponName.discount).toFixed(0)
									param.growth = this.couponName == null ? this.skuData.price * this.buyNum : (
										this.couponName.reduceType == '1' ? this.skuData.price * this.buyNum -
										this.couponName.amount : this.skuData.price * this.buyNum * this
										.couponName.discount).toFixed(0)
									param.shopId = this.skuData.shopId
									param.note = this.submitParam.note
									param.teamId = this.teamId
									param.payImage = this.payImage
									param.oldImage = this.oldImage
									param.sourceType = 1
									param.deliveryDate = this.deliveryDate == '暂无配送日期' ? null : this.deliveryDate
									param.orderType = this.skuData.spuInfo.spuAddType == 1 ? 3 : this.orderType
									param.useIntegration = this.integral,
										param.integrationAmount = (this.integral / 1000).toFixed(2),
										param.couponId = this.couponName == null ? null : this.couponName.historyId
									param.couponAmount = this.skuData.price * this.buyNum - (this.integral / 1000)
										.toFixed(2) - param.payAmount
									let spuPicList = this.skuData.spuImages;
									let vals = '';
									if (this.skuData.saleAttrValue != null) {
										vals = JSON.stringify({
											key: this.skuData.saleAttrValue.attrName,
											value: this.skuData.saleAttrValue.attrValue
										})
									}
									param.itemList.push({
										spuId: this.skuData.spuId,
										spuName: this.skuData.spuInfo.spuName,
										spuBrand: this.skuData.brandName,
										spuPic: spuPicList.length > 0 ? spuPicList[0] : '',
										categoryId: this.skuData.catalogId,
										skuId: this.skuData.skuId,
										skuName: this.skuData.skuName,
										skuPic: this.skuData.skuImages[0].imgUrl,
										skuPrice: this.skuData.price,
										skuRebate: (this.skuData.skuRebate * this.buyNum).toFixed(2),
										skuQuantity: this.buyNum,
										skuAttrsVals: vals,
										shopId: this.skuData.shopId,
										actId: this.skuData.spuInfo.actId,
										promotionAmount: this.skuData.price * this.buyNum,
										integrationAmount: (this.integral / 1000).toFixed(2),
										realAmount: this.couponName == null ? this.skuData.price * this
											.buyNum : (this.couponName.reduceType == '1' ? this.skuData
												.price * this.buyNum - this.couponName.amount - (this
													.integral / 1000).toFixed(2) : this.skuData.price *
												this.buyNum * this.couponName.discount).toFixed(2) - (this
												.integral / 1000).toFixed(2),
										couponAmount: (this.skuData.price * this.buyNum) - (this
											.couponName == null ? this.skuData.price * this.buyNum : (
												this.couponName.reduceType == '1' ? this.skuData
												.price * this.buyNum - this.couponName.amount : this
												.skuData.price * this.buyNum * this.couponName.discount
												).toFixed(2))
									})
								}
								console.log("==="+param);
								try {
									this.$api.request.memberSubmitOrder(param, res => {
										uni.removeStorageSync("placeOrder");
										res.data.user.number = this.buyNum
										// this.toPay(res);
										this.$api.request.payNotify(res.data.user, res => {
											console.log("通知", res);
											uni.redirectTo({
												url: "/pagesA/sys/user/order?type=2"
											})
										})
									})
								} catch (e) {
									console.log(e);
								}
							} else {
								this.$api.msg("请先选择地址")
							}
						} else {
							setTimeout(() => {
								this.$api.msg("库存不足")
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}, 1000)
						}
					})
				}

			},
			showImage(){
				uni.previewImage({
					urls:[this.payImage]
				})
			},
			toPay(data) {
				let res = JSON.parse(data.data.jsonStr)
				console.log(data);
				uni.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: (res) => {
						console.log("成功", res);
						this.$api.request.payNotify(data.data.user, res => {
							console.log("通知", res);
							uni.redirectTo({
								url: "/pagesA/sys/user/order?type=2"
							})
						})

					},
					fail: (err) => {
						console.log(err);
						this.$api.request.addOrderMessageQueue({
							orderId: data.data.user.id
						}, res => {
							console.log(res);
							if (res.code == 200) {
								uni.redirectTo({
									url: '/pagesA/sys/user/order?type=0'
								});
							}
						})
					}
				})
			},
			// 改变收货地址
			addressChange(address) {
				this.addressShow = false;
				this.setAddressParam(address);
			},
			// 设置收货地址
			setAddressParam(address) {
				this.submitParam = {
					totalAmount: null,
					payAmount: null,
					shopId: null,
					receiverName: null,
					receiverPhone: null,
					receiverPostCode: null,
					receiverProvince: null,
					receiverCity: null,
					receiverRegion: null,
					receiverDetailAddress: null,
					note: null,
					deliveryCompany: '普通配送',
					sourceType: 1,
					billType: 0,
					billHeader: null,
					billContent: null,
					billReceiverPhone: null,
					billReceiverEmail: null,
					itemList: [],
				}
				if (address) {
					this.submitParam.receiverName = address.name;
					this.submitParam.receiverPhone = address.phoneNumber;
					this.submitParam.receiverPostCode = address.postCode;
					this.submitParam.receiverProvince = address.province;
					this.submitParam.receiverCity = address.city;
					this.submitParam.receiverRegion = address.region;
					this.submitParam.receiverDetailAddress = address.detailAddress;
				} else {
					this.submitParam = false
				}

			},
			// 配送方式选择
			deliverySelect(event) {
				this.submitParam.deliveryCompany = event[0].value;
			},
			// 发票类型选择
			billTypeSelect(item) {
				this.submitParam.billType = item.value;
				this.billTypeName = item.label;
			},
			// 发票确认按钮
			confirmBill() {
				if (this.submitParam.billType != '0') {
					if (utils.validString(this.submitParam.billHeader)) {
						return this.$u.toast('请填写发票抬头');
					} else if (utils.validString(this.submitParam.billReceiverPhone)) {
						return this.$u.toast('请填写收票电话');
					} else if (utils.validString(this.submitParam.billReceiverEmail)) {
						return this.$u.toast('请填写收票邮箱')
					}
					// 放入商品明细到发票内容
					this.submitParam.billContent = this.skuData.skuName + "\n";
					if (this.skuData.saleAttrValue != null) {
						this.submitParam.billContent += this.skuData.saleAttrValue.attrName + " - " +
							this.skuData.saleAttrValue.attrValue;
					}
					this.billTypeName += ' - ' + this.submitParam.billHeader;

				} else {
					this.billTypeName = '不开发票';
					this.submitParam.billHeader = null;
					this.submitParam.billContent = null;
					this.submitParam.billReceiverPhone = null;
					this.submitParam.billReceiverEmail = null;
				}
				this.billShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		color: #000000;
		min-height: 100vh;
		background: $page-gery-light;
		padding-bottom: calc(186rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(186rpx + env(safe-area-inset-bottom));

		.top-section {
			.address-selected {
				display: flex;
				padding: 22rpx 24rpx 28rpx;
				border-radius: 0 0 24rpx 24rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0400);
			}

			.address-selected-content {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex: 1;
				overflow: hidden;

				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-top: 5rpx;
				}

				.left-data {
					flex: 1;
					overflow: hidden;
				}

				.address-detail {
					font-size: 28rpx;
					color: #111;
				}

				.address-contact {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #666;
				}
			}

			.address-add {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #111111;
				flex: 1;
				overflow: hidden;

				.icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.body-section {
			line-height: 40rpx;

			.shop-group {
				background-color: #FFFFFF;
				border-radius: 24rpx;
			}

			.title {
				display: flex;
				font-size: 32rpx;
				padding: 0 0 20rpx 10rpx;
				border-bottom: 1rpx solid $page-gery-light;

				.title-descs {
					margin-left: 20rpx;
					color: #111;
				}
			}

			.goods-card {
				background: #fff;
				border-radius: 24rpx;
				padding: 18rpx 24rpx;
				margin-top: 24rpx;
				box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0400);

				.goods-content {
					margin-top: 22rpx;
					display: flex;
					align-items: stretch;

					.goods-data {
						flex: 1;
						overflow: hidden;
						display: flex;
						justify-content: space-around;
						flex-direction: column;
						margin-left: 24rpx;

						.goods-title {
							font-size: 32rpx;
							color: #333;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}

						.goods-sku {
							font-size: 28rpx;
							color: #999;
						}

						.goods-price {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

						.price {
							font-size: 30rpx;
							color: #009B65;
						}

						.num {
							font-size: 26rpx;
							color: #999;
						}
					}
				}

				.goods-other {
					margin-top: 22rpx;
					border-top: 1rpx solid $page-gery-light;
				}
			}

			.order-msg {
				background: #fff;
				border-radius: 24rpx;
				margin-top: 24rpx;
				padding: 12rpx 24rpx 0;
				box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0400);

				::v-deep .u-border-bottom:after {
					border: none;
				}

				::v-deep .u-field {
					padding: 16rpx 0;
				}
			}

			.order-remark {
				box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0400);
				margin-top: 24rpx;
				background: #fff;
				border-radius: 24rpx;
			}
		}

		.bottom-row {
			bottom: 0;
			width: 100%;
			display: flex;
			padding: 20rpx 24rpx calc(20rpx + constant(safe-area-inset-bottom));
			padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
			position: fixed;
			background-color: #FFFFFF;
			z-index: 99;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.13);
		}

		.bill-popup {
			height: 900rpx;
			padding: 20rpx;

			.bill-popup-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.address-selector {
			height: 1000rpx;
			padding-top: 30rpx;
			background-color: #E5E5E5;

			.addr-title {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 5rpx;
				line-height: 40rpx;
			}

			.as-item {
				display: flex;
				padding: 10rpx;
				line-height: 38rpx;
				border-radius: 12rpx;
				margin: 10rpx 10rpx 0;
				background-color: #FFFFFF;

				.default-tag {
					color: #E71E22;
					padding: 0 10rpx;
					margin-left: 20rpx;
					border: 1px #E71E22 solid;
				}
			}
		}
	}


	.showPopup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999 !important;

		.centent-white-box {
			width: 80vw !important;
			// height: 700rpx !important;
			background: #FFFFFF;
			border-radius: 100rpx 100rpx 20rpx 20rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			.qrcode-box{
				background-image: url('../../../static/image/qrcode-bg.png');
				background-repeat: no-repeat;
				background-size: contain;
				padding: 40rpx;
			}
			.title-text {
				text-align: center;
				margin-top: 20rpx;
				font-size: 34rpx;
				font-weight: 500;
			}

			.ticket-box {
				width: auto;
				height: 400rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				overflow-y: scroll;
			}

			.bottom-list-box {
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: absolute;
				color: #FFFFFF;
				bottom: 0;
				border-top: 1rpx solid rgba(0, 0, 0, .1);
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				background: #2979ff;
			}
		}

	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		.add-tips {
			font-size: 32rpx;
			color: #111;
		}
	}

	.bottom-pay-type {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: absolute;
		bottom: -100rpx;
	}
</style>
